<template>
  <div>
    <div class="title">活动列表</div>
    <div class="btn">
      <el-input
        v-model="search"
        clearable
        size="small"
        prefix-icon="el-icon-search"
        placeholder="搜索广播名称"
      >
      </el-input>
      <div>
        <el-button type="primary">新建</el-button>
      </div>
    </div>
    <div>
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                border
              >
                <el-table-column label="序号" type="index" align="center">
                  <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
                </el-table-column>
                <el-table-column prop="atyId" label="活动编号" align="center">
                </el-table-column>
                <el-table-column
                  prop="atyName"
                  label="活动名称"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="atyType"
                  label="活动类型"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                 
                  label="报名时间"
                  show-overflow-tooltip
                  align="center"
                >
                   <template slot-scope="scope">
                        {{scope.row.enrollStartTime}}-{{scope.row.enrollEndTime}}
                   </template>>
                </el-table-column>
                <el-table-column
              
                  label="活动时间"
                  show-overflow-tooltip
                  align="center"
                >
                <template slot-scope="scope">
                        {{scope.row.atyStartTime}}-{{scope.row.atyEndTime}}
                   </template>>
                </el-table-column>
                <el-table-column
                  prop="atyState"
                  label="活动进度"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="enrollNumber"
                  label="参与人数"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
               
                 <el-table-column
                  prop=""
                  label="操作"
                  align="center"
                  show-overflow-tooltip
                  width="120"
                >
                  <template slot-scope="scope">
                    <el-link type="primary" @click="ck(scope.row)"
                      >查看</el-link
                    >
               
                  </template>
                </el-table-column>

              </el-table>
              <!-- 分页 -->
              <Page
                :total="total"
                :pageNumber.sync="pageNumber"
                :pageSize.sync="pageSize"
                @current-change="changeCurrentPage"
                @size-change="handleSizeChange"
              >
              </Page>
              </div>
  </div>
</template>

<script>
import apis from "../../apis/modules/activityList";
import Page from "../../components/page.vue";
export default {
      components: {
    Page,
  },
  data() {
      
    return {
      search: "",
        pageNumber: 1,
      pageSize: 10,
      total: null,
      tableData:[  ],
    };
  },
  mounted(){
      this.getLiveBroadcast({
      atyType:"all",
      atyState:"all",
      priceType:"all",
      state:"all",
      pageNumber:this.pageNumber,
      pageSize:this.pageSize
    })
  },
  methods:{
             //活动列表
  async getLiveBroadcast(data){
      apis.getLiveBroadcast(data).then(res=>{
     
        this.total=res.data.count
        this.tableData=res.data.list
        const list = this.tableData
        list.map(res=>{
          switch (res.atyState) {
            case "1":
              res.atyState="预热中"
              break;
            case "2":
              res.atyState="报名中"
              break;
            case "3":
              res.atyState="进行中"
              break;
            case "4":
              res.atyState="已结束"
              break;
          
            default:
              break;
          }
          switch (res.atyType) {
            case "1":
              res.atyType="线上活动"
              break;
            case "2":
              res.atyType="线下活动"
              break;
    
            default:
              break;
          }
          switch (res.state) {
            case "1":
              res.state="已上架"
              break;
            case "2":
              res.state="未上架"
              break;
    
            default:
              break;
          }
          switch (res.atyPrice) {

            case 0:
              res.atyPrice="免费"
              break;
    
            default:
              break;
          }
          return res
        })
      })
    },
 changeCurrentPage(val) {
     
    },
    handleSizeChange(val) {
 
    },
    ck(data){
        console.log(data);
this.$router.push({
          name: 'JudgeDeail',
          params: {
            atyId: data.atyId,
            atyPrice:data.atyPrice
          }
        })
    }
  },
};
</script>
<style lang="scss" scoped>
.title {
  margin-top: -10px;
  font-size: 14px;
  margin-bottom: 20px;
}
.btn {
  display: flex;
  justify-content: space-between;
  .el-button {
    width: 120px;
  }
}
.el-input {
  width: 300px;
}
</style>